<template>
  <div
    class="system-child-btn"
    :class="[
      theme,
      systemSettingStore.$state.deskAppRangeType,
      { blur: runningTaskStore.$state.currentTaskAppId !== appId }
    ]"
    @mousedown.stop
    @dblclick.stop
  >
    <template v-if="systemSettingStore.$state.deskAppRangeType === 'win'">
      <span v-if="$slots.perv" @click.stop="$emit('pervClick')">
        <slot name="perv" />
      </span>
      <span v-for="item in pervIconList" :key="item.icon" @click.stop="item.event()">
        <i class="iconfont fs10" :class="[item.icon]" />
      </span>
      <span @click.stop="handleMinimization">
        <i class="iconfont wos-minimization fs10" />
      </span>
      <span v-if="isMaxBtn" @click.stop="handleMaxMin">
        <i v-if="!isMax" class="iconfont wos-maximize fs10" />
        <i v-else class="iconfont wos-recover-window fs10" />
      </span>
      <span @click.stop="handleClose">
        <i class="iconfont wos-close fs10" />
      </span>
    </template>
    <template v-else-if="systemSettingStore.$state.deskAppRangeType === 'ios'">
      <span class="close" @click.stop="handleClose">
        <i class="iconfont wos-close fs6" />
      </span>
      <span class="minimization" @click.stop="handleMinimization">
        <i class="iconfont wos-minimization fs6" />
      </span>
      <span v-if="isMaxBtn" class="min-max" @click.stop="handleMaxMin">
        <i v-if="!isMax" class="iconfont wos-maximize fs6" />
        <i v-else class="iconfont wos-recover-window fs6" />
      </span>
    </template>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import type { PropType } from 'vue'

defineEmits(['pervClick'])

const props = defineProps({
  theme: {
    type: String as PropType<'dark' | 'light'>,
    default: null
  },
  closeType: {
    type: String as PropType<'close' | 'hidden'>,
    default: 'close'
  },
  isMaxBtn: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  pervIconList: {
    type: Array as PropType<{ icon: string; event: () => void }[]>,
    default: () => []
  }
})

const isMax = inject<boolean>('isMax')
const appId = inject<string>('appId')
const systemSettingStore = useSystemSettingStore()
const runningTaskStore = useRunningTasksStore()
const childMinimization = inject<() => void>('childMinimization')
const childMaxMin = inject<() => void>('childMaxMin')
const childClose = inject<() => void>('childClose')
const childHiddenToTray = inject<() => void>('childHiddenToTray')

const handleMinimization = () => {
  childMinimization && childMinimization()
}
const handleMaxMin = () => {
  childMaxMin && childMaxMin()
}
const handleClose = () => {
  if (props.closeType === 'close') {
    childClose && childClose()
  } else if (props.closeType === 'hidden') {
    childHiddenToTray && childHiddenToTray()
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin';

.system-child-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  height: 100%;
  color: var(--base-font);

  &.ios {
    left: 0;
    right: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 20px;

    &.blur span {
      background-color: var(--ios-blur) !important;
    }

    > span {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #000;

      &:hover {
        i {
          display: inline-block;
        }
      }

      > i {
        display: none;
      }

      &.close {
        background-color: var(--ios-close);
      }

      &.minimization {
        background-color: var(--ios-min);
      }

      &.min-max {
        background-color: var(--ios-max);
      }
    }
  }

  &.win {
    > span {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 100%;

      &:hover {
        @include hover-model;
        background-color: var(--system-modal-drag-bg-hover-color);

        &:last-of-type {
          color: #fff;
          background-color: rgb(232, 17, 35);
        }
      }
    }
  }

  &.dark {
    color: #fff;
  }

  &.light {
    color: #000;
  }
}
</style>
